<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>注册登录页面</title>
     
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="user register/login page">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap-theme.min.css">
  </head>
  <body>
		<div class="container">
			<form name="formUser" class="form-horizontal" action="<%=request.getContextPath()%>/register"  method="post">
			    <fieldset>
			      <div id="legend" class="">
			        <legend class="">用户注册</legend>
			      </div>
			    <div class="control-group">
			
			          <!-- Text input-->
			          <label class="control-label" for="input01">用户名</label>
			          <div class="controls">
			            <input type="text" placeholder="请输入用户名" class="input-xlarge" name="userid" onBlur="checkUserName(this)">
			            <p class="help-block" id="userid_notice"></p>
			          </div>
			        </div>
			    <div class="control-group">
			
			          <!-- Text input-->
			          <label class="control-label" for="input02">密码</label>
			          <div class="controls">
			            <input type="password" placeholder="请输入密码" class="input-xlarge" name="password" id="password" onBlur="checkPassword(this)" >
			            <p class="help-block" id="password_notice"></p>
			          </div>
			        </div>
			    <div class="control-group">
			
			          <!-- Text input-->
			          <label class="control-label" for="input03">确认密码</label>
			          <div class="controls">
			            <input type="password" placeholder="请再次输入密码" class="input-xlarge" id="confirmpassword" onBlur="checkConformPassword(this)">
			            <p class="help-block" id="conform_password_notice"></p>
			          </div>
			        </div>
			    <div class="control-group">
			
			          <!-- Text input-->
			          <label class="control-label" for="input04">邀请码</label>
			          <div class="controls">
			            <input type="text" placeholder="请输入邀请码" class="input-xlarge" name="invitedcd" id="invitedcd">
			            <p class="help-block"></p>
			          </div>
			        </div>
			    <div class="control-group">
			
			          <!-- Text input-->
			          <label class="control-label" for="input05">验证码</label>
			          <div class="controls">
			            <table class="table" frame=void>
			            	<tr>
			            	<td style="padding-left:0px;">
			            		<input type="text" placeholder="请输入验证码" class="input-xlarge" name="identifyingCd" id="identifyingCd" onBlur="checkIdentifyingCd(this)" style="width:174px;">
			            	</td>
			            	<td>
			            		<img id="imgObj" alt="验证码" src="code" />
			            		<a href="#" onclick="changeImg()">换一张</a>
			            	</td>
			            	</tr>
			            </table>
			            <p class="help-block"  id="conform_identifyingCd_notice"></p>
			          </div>
			        </div>
			    <div class="control-group">
			          <label class="control-label"></label>

			          <!-- Button -->
			          <div class="controls">
			          	<input type=submit value="确认注册" name="Submit1" class="btn btn-success" disabled>
			          </div>
			          <br>
			          <a href="<%=request.getContextPath()%>/jumptologin">已有用户，直接登录</a>
			        </div>
			    </fieldset>
			  </form>
			  ${requestScope.msg}
		</div>
	<script type="text/javascript">
		var username_empty = "<span style='COLOR:#ff0000'>  × 用户名不能为空!</span>";  
		var username_shorter = "<span style='COLOR:#ff0000'> × 用户名长度不能少于 3 个字符。</span>";  
		var username_longer = "<span style='COLOR:#ff0000'> × 用户名长度不能大于 30个字符。</span>";  
		var username_invalid = "<span style='COLOR:#ff0000'> × 用户名只能是由字母数字以及下划线组成。</span>";  
		var password_empty = "<span style='COLOR:#ff0000'> × 登录密码不能为空。</span>";  
		var password_shorter_s = "<span style='COLOR:#ff0000'> × 登录密码不能少于 6 个字符。</span>";  
		var password_shorter_m = "<span style='COLOR:#ff0000'> × 登录密码不能多于 30 个字符。</span>";  
		var confirm_password_invalid = "<span style='COLOR:#ff0000'> × 两次输入密码不一致!</span>";
		var info_right="<span style='COLOR:#006600'> √ 填写正确!</span>"; 
		var confirm_identifyingCd_invalid = "<span style='COLOR:#ff0000'> × 验证码不正确!</span>";
		var name_flag=false;
		var password_flag=false;
		var invitecd = getUrlParam("invitedCd");
		if(invitecd != null){
			$("#invitedcd").val(invitecd);
		}
		
		/*
		 * 获取工程的路径
		 */
		function getRootPath() {
			var pathName = window.location.pathname.substring(1);
			var webName = pathName == '' ? '' : pathName.substring(0, pathName
					.indexOf('/'));
			return window.location.protocol + '//' + window.location.host + '/'
					+ webName + '/';
		}
		/*
		 * 用户名检测
		 */
		function checkUserName(obj) {
			if (checks(obj.value) == false) {
				showInfo("userid_notice", username_invalid);
				name_flag=false;
			} else if (obj.value.length < 1) {
				showInfo("userid_notice", username_empty);
				name_flag=false;
			}else if (obj.value.length < 3) {
				showInfo("userid_notice", username_shorter);
				name_flag=false;
			} else if(obj.value.length>30){
				showInfo("userid_notice", username_longer);
				name_flag=false;
		  } else{
		  	showInfo("userid_notice", info_right);
		  	name_flag=true;
		  }
			
			change_submit();
		}  
		/*
		 * 用户名检测是否包含非法字符
		 */
		function checks(t) {
			szMsg = "[#%&\'\"\\,;:=!^@]"
			for (i = 1; i < szMsg.length + 1; i++) {
				if (t.indexOf(szMsg.substring(i - 1, i)) > -1) {
					return false;
				}
			}
			return true;
		}
		
		/*
		 * 密码检测
		 */
		 function checkPassword( password )  
		 {  
			 if(password.value.length < 1){
				 password_flag=false;
		         showInfo("password_notice",password_empty);  
			 }else if ( password.value.length < 6 )  
		     {  
				 password_flag=false;
		         showInfo("password_notice",password_shorter_s);  
		     }  
		     else if(password.value.length > 30){  
		    	 password_flag=false;
		         showInfo("password_notice",password_shorter_m);  
		         }  
		     else  
		     {  
		     	 password_flag=true;
		         showInfo("password_notice",info_right);  
		     }  
			 change_submit();
		 }  
		 
		 /*
		  * 密码确认检测
		  */
		 function checkConformPassword(conform_password)  
		 {   
			 var password = $("#password").val(); 
			  if ( conform_password.value!= password)  
		     {  
		         showInfo("conform_password_notice",confirm_password_invalid);  
		     }  
		     else  
		     {     
		         showInfo("conform_password_notice",info_right);  
					password_flag=true;
					change_submit();
					return;
		     }  
			 password_flag=false;
			 change_submit();
		
		 }
		 
		 /*
		  * 按钮状态设置
		  */ 
		function change_submit()  
		{   	
			if(name_flag&&password_flag&&identifyingCd_flag){
				  document.forms['formUser'].elements['Submit1'].disabled = '';  
			}
		   else  
		     {  
		          document.forms['formUser'].elements['Submit1'].disabled = 'disabled';  
		     }  
		}
		/*
		 * 公用程序
		 */  
		function showInfo(target,Infos){  
			document.getElementById(target).innerHTML = Infos;  
		}

		function getUrlParam(name){
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
		}
		
 		function changeImg() {
        	var imgSrc = $("#imgObj");
        	var src = imgSrc.attr("src");
        	imgSrc.attr("src", chgUrl(src));
   		}
    //时间戳   
    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
    	function chgUrl(url) {
        	var timestamp = (new Date()).valueOf();
        	url = url.substring(0, 17);
        	if ((url.indexOf("&") >= 0)) {
       	   		url = url + "×tamp=" + timestamp;
        	} else {
        	    url = url + "?timestamp=" + timestamp;
        	}
        	return url;
        }
        
      	function checkIdentifyingCd(identifyingCd){
      		var identifyingCd = identifyingCd.value;
      		$.ajax({ //一个Ajax过程  
		        type: "post", //以post方式与后台沟通  
		        url :getRootPath()+"/checkIdentifyingCd", //与此页面沟通  
				dataType:'json',//返回的值以 JSON方式 解释  
		        data: 'identifyingCd='+identifyingCd, //发给的数据  
				success: function(json){//如果调用成功  
					if(json.sts != 0){  
					//error
						showInfo("conform_identifyingCd_notice",confirm_identifyingCd_invalid);
						identifyingCd_flag = false;
					}else {
						showInfo("conform_identifyingCd_notice",info_right);
						identifyingCd_flag = true; 
					}
					change_submit();
				}
			});
      	}
	</script>
  </body>
</html>
